<template>
  <div class="container">
    <div class="app-container">
      审批
      <div>{{ personArr }}</div>
      <button @click="optArr">操作数组数据</button>
      <hr>

      <div>{{ dog }}</div>
      <button @click="optObj">操作对象数据</button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Approvals',
  data() {
    return {
      personArr: ['刘备', '曹操', '关羽', '赵云'],
      dog: {
        name: '旺财',
        age: 10,
        dogFriends: ['大黄', '飞虎']
      }
    }
  },
  methods: {
    optArr() {
      // 1. 如果直接修改数组中的数据是不可以的, 因为要保持响应式
      // 但是可以借助一系列数组方法去操作数组中的数据
      // 因为 vue对数组中的方法(unshift, push, ...)进行了重写,
      // 使得这些方法修改了数据之后能够让数组继续保持响应式
      // this.personArr.unshift('刘德华')
      // this.personArr.push('刘德华')
      // this.personArr[2] = '刘德华'
      this.$set(this.personArr, 2, '刘德华')
    },
    optObj() {
      // 数据可以修改，仍然保持响应式
      // this.dog.name = '小球球'

      // this.dog.color = '黑不溜秋'
      // 实际上是添加了color，但是data中看不到，在控制台打印看到
      // console.log(this.dog)

      this.$set(this.dog, 'color', '黑不溜秋')
    }
  }
}
</script>
